<template>
  <!-- echarts需要一个 div 做为渲染容器 -->
  <div class="base-chart-box" ref="baseChartBox"></div>
</template>


<script>
  // import echarts from '哪里'
  // 全局引入
  // npm i echarts --save(全局安装,并引用到当前项目中) -g
  // main.js 引入
  // this.$echarts 使用
  
  export default {
    mounted(){
      // var myChart = echarts.init(document.querySelector("base-chart-box"))

      // $refs 是获取项目中 所有的 dom , 不是自动的 , 需要用ref=""定义
      var myChart = this.$echarts.init(this.$refs.baseChartBox)
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      })
    }
  }
</script>

<style>
.base-chart-box{
  width: 400px;
  height: 300px;
  border:3px solid #ccc
}
</style>